@charset "utf-8";

@import "./reset.scss";

@function getvw($w){
    @return ($w / 750) * 100 + vw
}

.wrap{
    width: getvw(750);
    .header{
        width: getvw(750);
        ul{
            display: flex;
            margin: getvw(48) getvw(23);
            justify-content: space-between;
            align-items: center;
            li {
                font-size: getvw(25);
            }
            li:first-child{
                width: getvw(123);
                height: getvw(57);
                border-radius: getvw(20);
                border: 1px solid orange;
                text-align: center;
                line-height: getvw(57);
                font-size: getvw(21);
            }
            select{
                width: getvw(159);
                height: getvw(56);
                border-color: orange;
                appearance: none;
                position: relative;
                font-size: getvw(25);
            }
        &::after{
            content: '';
            width: 0px;
            height: 0px;
            position: absolute;
            top: getvw(72);
            right: getvw(30);
            border-style: solid;
            border-width: getvw(16);
            border-color: orange transparent transparent transparent;
        }
        }
    }
    .search{
        width: getvw(266);
        height: getvw(51);
        margin: 0px auto;
        margin-bottom: getvw(33);
        position: relative;
        input{
            width: getvw(237);
            height: getvw(51);
            border: 1px solid orange;
            border-radius: 15px;
            font-size: getvw(24);
            padding-left: getvw(29);
        }
        .glass{
            font-size: getvw(30);
            position: absolute;
            right: getvw(20);
            top: getvw(15);
            color: orange;
        }
    }
    .choose{
        width: getvw(512);
        height: getvw(171);
        margin: 0px auto;
        margin-bottom: getvw(45);
        text-align: center;
        p{
            font-size: getvw(24);
            margin-bottom: getvw(14);
        }
        ul{
            width: getvw(512);
            height: getvw(131);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: getvw(14);
            li{
                width: getvw(125);
                height: getvw(64);
                background-color: rgb(202, 202, 202);
                text-align: center;
                line-height: getvw(64);
                font-size: getvw(20);
                color: gray;
                margin-bottom: getvw(3);
            }
        }
    }
    .hot{
        width: getvw(710);
        margin: 0px auto;
        margin-bottom: getvw(30);
        position: relative;
        img{
            width: getvw(32);
            height: getvw(47);
            margin-left: getvw(20);
        }
        .arrow{
            font-size: getvw(25);
            color: orange;
            position: absolute;
            right: getvw(0);
            top: getvw(19);
        }
        .text{
            width: getvw(611);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: absolute;
            top: getvw(12);
            left: getvw(64);
            p:first-child{
                font-size: getvw(30);
            }
            p:last-child{
                font-size: getvw(24);
            }
        }
    }
    .foodPhoto{
        width: getvw(710);
        height: getvw(352);
        margin: 0px auto;
        margin-bottom: getvw(47);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .left img{
            width: getvw(280);
            height: getvw(352);
        }
        .right{
            width: getvw(420);
            height: getvw(352);
            ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                li:first-child{
                    img{
                        width: getvw(420);
                        height: getvw(147);
                        margin-bottom: getvw(8);
                    }
                }
                li:nth-child(2) {
                    img{
                        width: getvw(195);
                        height: getvw(197);
                    }
                }
                li:nth-child(3){
                    img{
                        width: getvw(211);
                        height: getvw(197);
                    }
                }
            }
        }
    }
    .recommond{
        width: getvw(710);
        margin: 0px auto;
        position: relative;
        margin-bottom: getvw(48);
        img{
            width: getvw(40);
            height: getvw(40);
            margin-left: getvw(15);
        }
        .arrow{
            font-size: getvw(25);
            color: orange;
            position: absolute;
            right: getvw(0);
            top: getvw(19);
        }
        .text{
            width: getvw(611);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: absolute;
            top: getvw(12);
            left: getvw(64);
            p:first-child{
                font-size: getvw(30);
            }
            p:last-child{
                font-size: getvw(24);
            }
        }
    }
    .photo{
        width: getvw(710);
        margin: 0px auto;
        margin-bottom: getvw(140);
        ul{
            display: flex;
            justify-content: space-between;
            li{
                img{
                    width: getvw(220);
                    height: getvw(200);
                }
            }
        }
    }
    .bottom{
        width: getvw(750);
        position: fixed;
        bottom: 0px;
        background-color: white;
        ul{
            display: flex;
            justify-content: space-around;
            li{
                text-align: center;
                a{
                    color: black;
                    text-decoration: none;
                }
                i{
                    font-size: getvw(73);
                    color: orange;
                }
                p{
                    font-size: getvw(26);
                }
            }
        }
    }
}

